<%--
  Created by IntelliJ IDEA.
  User: xin
  Date: 2021/12/17
  Time: 0:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>顾客用户管理</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<style>
    /**{margin: 0;padding: 0;}*/
    /*body{min-width:1000px}*/
    /*.box{background-color:white;height: 560px}*/
    /*.box .main{height:100%;width: 80%; float: left;}*/
    /*.box .main h1{font-size: 100px; text-align: center;padding-top: 196px ;margin: 0}*/
    /*.main table{width: 100%;text-align: center;}*/
    /*.main table thead{width:100%;display: block;}*/
    /*.main table tbody{width:100%;display: block;height:360px;overflow: scroll}*/
    /*.main table tbody::-webkit-scrollbar{display:none}*/
    /*.main table tbody tr td button{padding:3px;margin: 0;border-radius: 5px}*/
    /*.main table tbody tr{height:29px;width: 100%;display: block;border-top: 2px solid #eee;}*/
    /*.main table tbody tr:hover{background-color:rgba(0,0,0,.3);}*/
    /*.main table thead tr{width: 100%;display: block}*/
    /*.main table tbody tr td{width:14%;height:24px;display: block;float: left;margin-bottom: 3px;overflow: hidden}*/
    /*.main table thead tr th{width:14%;display: block;float: left}*/
    /*.outbox{position: absolute;width: 100%;height:560px; display: none;background-color: rgba(0,0,0,.3);}*/
    /*.outbox .Form{width:600px;margin-top:100px;margin-left: 250px;background-color: white;border: 1px solid #000;border-radius: 5px;text-align:center;}*/
    /*.outbox .Form .input{ width: 50%;margin-bottom: 10px;}*/
    .main table tbody tr td{width:14%;}
    .main table thead tr th{width:14%;}
</style>
<script>
    function deleteButtonClick(email){
        let msg = "您确定要删除该用户吗？";
        if (confirm(msg)===true){
            window.location ="/Gradle___com_example___stroeBackstage_1_0_SNAPSHOT_war/toDelCustomer?email="+email;
            return true;
        }else{
            return false;
        }
    }
    function modifyButtonClick( name, email, password, address, PAC,  phone, fax){
        let modifyBox=document.getElementById("modifyBox");
        modifyBox.style.display = "block";
        let modifyForm = document.getElementById("modifyForm")
        modifyForm.children.namedItem("name").value = name;
        modifyForm.children.namedItem("email").value = email;
        modifyForm.children.namedItem("password").value = password;
        modifyForm.children.namedItem("address").value = address;
        modifyForm.children.namedItem("PAC").value = PAC;
        modifyForm.children.namedItem("phone").value = phone;
        modifyForm.children.namedItem("fax").value = fax;
    }
    function addButtonClick(){
        let addBox=document.getElementById("addBox");
        addBox.style.display = "block";

    }
    function quit(box){
        box.style.display = "none";
    }
</script>
<body>
<jsp:include page="header.jsp"/>
<div class="box">
    <jsp:include page="nav.jsp"/>
    <div class="main">
        <div id="addBox" class="outbox">
            <form action="${pageContext.request.contextPath}/toInsertCustomer" id="addForm" class="Form">
                <h2 style="text-align: center">添加顾客用户</h2>
                名字：<input type="text" name="name" class="input">
                <br>
                邮箱：<input type="text" name="email" class="input">
                <br>
                密码：<input type="password" name="password" class="input">
                <br>
                省市：<input type="text" name="PAC" class="input">
                <br>
                地址：<input type="text" name="address" class="input">
                <br>
                电话：<input type="text" name="phone" class="input">
                <br>
                传真：<input type="text" name="fax" class="input">
                <br>
                <input type="submit" value="确认">
                <input type="reset" value="退出" onclick="quit(addBox)">
            </form>
        </div>
        <div id="modifyBox" class="outbox">
            <form action="${pageContext.request.contextPath}/toUpdateCustomer" id="modifyForm" class="Form">
                <h2 style="text-align: center">修改顾客用户</h2>
                名字：<input type="text" name="name" class="input">
                <br>
                邮箱：<input type="text" name="email" readonly class="input">
                <br>
                密码：<input type="password" name="password" class="input">
                <br>
                省市：<input type="text" name="PAC" class="input">
                <br>
                地址：<input type="text" name="address" class="input">
                <br>
                电话：<input type="text" name="phone" class="input">
                <br>
                传真：<input type="text" name="fax" class="input">
                <br>
                <input type="submit" value="确认">
                <input type="reset" value="退出" onclick="quit(modifyBox)">
            </form>
        </div>
        <div style="margin: 10px auto;height: 20%;width: 500px;text-align: center" class="main_head">
            <form action="${pageContext.request.contextPath}/toFindCustomer" style="margin: 10px auto;text-align: center">
                <label>
                    <input type="search"  name="search" placeholder="输入邮箱或用户名">
                </label>
                <input type="submit" value="查询">
            </form>
            <button onclick="addButtonClick()">添加用户</button>
        </div>
        <table>
            <thead>
            <tr>
                <th>用户名</th>
                <th>电子邮箱</th>
                <th>省市</th>
                <th>具体地址</th>
                <th>电话号码</th>
                <th>传真号码</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${sessionScope.customerList}" var="item" >
                <tr>
                    <td>${item.name}</td>
                    <td>${item.email}</td>
                    <td>${item.PAC}</td>
                    <td>${item.address}</td>
                    <td>${item.phone}</td>
                    <td>${item.fax}</td>
                    <td>
                        <button style="background-color:#E6A23C;color: white;border: #E6A23C"
                                onclick="modifyButtonClick(`${item.name}`,`${item.email}`,`${item.password}`,
                                        `${item.address}`,`${item.PAC}`,`${item.phone}`,`${item.fax}`)" >修改</button>
                        <button style="background-color: red;color: white;border: red" onclick="deleteButtonClick(`${item.email}`)">删除</button>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>
<jsp:include page="footer.jsp"/>
</body>
</html>
